<template>
  <div
    class="mask"
    :style="{
      left: containerParams.left + 'px',
      top: containerParams.top + 'px',
      width: containerParams.width + 'px',
      height: containerParams.height + 'px',
    }"
    v-show="pos.visible"
  ></div>
</template>

<script lang="ts">
import { defineComponent, PropType } from "vue";

export default defineComponent({
  props: {
    pos: {
      type: Object as PropType<{
        startLeft: number;
        startTop: number;
        endLeft: number;
        endTop: number;
        visible: boolean;
      }>,
      required: true,
    },
  },
  computed: {
    containerParams(): {
      left: number;
      top: number;
      width: number;
      height: number;
    } {
      const left = Math.min(this.pos.startLeft, this.pos.endLeft);
      const top = Math.min(this.pos.startTop, this.pos.endTop);
      const width = Math.abs(this.pos.startLeft - this.pos.endLeft);
      const height = Math.abs(this.pos.startTop - this.pos.endTop);
      const ret =  { left, top, width, height };
      return ret
    },
  },
});
</script>

<style scoped>
.mask {
  position: absolute;
  opacity: 1;
  border: 1px solid var(--highlight);
}
</style>
